<template>
  <a-card class="ml-2 h-full transition-all" :class="historyExpand ? 'w-[378px]' : 'w-20'" disabled :body-style="{ padding: 0, height: '100%', width: '100%' }">
    <div v-if="!historyExpand" class="h-full">
      <div class="flex flex-col pt-1">
        <a-space direction="vertical" class="mt-2" align="center" :size="24">
          <a-button type="default" class="w-16 min-h-10 px-0 h-auto whitespace-normal" @click="onShowHistory('常用医嘱')">
            <div class="img-style"><img :src="getIcon('常用医嘱')" alt="" /></div>
            <div class="text-xs">常用医嘱</div>
          </a-button>
          <a-button v-if="activeKey === '8'" type="default" class="w-16 min-h-10 px-0 h-auto whitespace-normal" @click="onShowHistory('历史医技')">
            <div class="img-style"><img :src="getIcon('历史影像')" alt="" /></div>
            <div class="text-xs">历史影像</div>
          </a-button>
          <a-button v-if="activeKey !== '8'" type="default" class="w-16 min-h-10 px-0 h-auto whitespace-normal" @click="onShowHistory('历史病历')">
            <div class="img-style"><img :src="getIcon('历史病历')" alt="" /></div>
            <div class="text-xs">历史病历</div>
          </a-button>
          <a-button v-if="activeKey === '0'" type="default" class="w-16 min-h-10 px-0 h-auto whitespace-normal" @click="onShowHistory('病历模板')">
            <div class="img-style"><img :src="getIcon('病历模板')" alt="" /></div>
            <div class="text-xs">病历模板</div>
          </a-button>
          <a-button v-if="activeKey === '0'" type="default" class="w-16 min-h-10 px-0 h-auto whitespace-normal" @click="onShowHistory('常用词语')">
            <div class="img-style"><img :src="getIcon('常用词语')" alt="" /></div>
            <div class="text-xs">常用词语</div>
          </a-button>
        </a-space>
      </div>
    </div>
    <a-drawer v-model:open="historyExpand" :title="expandTitle" placement="right" :get-container="false" :mask="false" class="shadow-none">
      <CommonlyUsed v-if="expandTitle === '常用医嘱'" :active-key="activeKey" />
      <HistoryCase v-if="expandTitle === '历史病历'" @success="onCopySuccess" />
      <HistoryPart v-if="expandTitle === '历史医技'" @success="onCopySuccess" />
      <EmrTemplate v-if="expandTitle === '病历模板'" @select="onSelectEmr" />
      <EmrKeywords v-if="expandTitle === '常用词语'" @select="onSelectEmrKeywords" />
    </a-drawer>
  </a-card>
</template>
<script setup>
import { ref } from 'vue'

import CommonlyUsed from './CommonlyUsed.vue'
import HistoryCase from './HistoryCase.vue'
import HistoryPart from './HistoryPart.vue'
import EmrTemplate from './EmrTemplate.vue'
import EmrKeywords from './EmrKeywords.vue'

const getIcon = (name) => {
  return new URL(`/src/assets/icons/icon-side-${name}.png`, import.meta.url).href
}
defineProps({
  activeKey: {
    type: String,
    default: ''
  }
})
const historyExpand = ref(false)
const emit = defineEmits(['copy', 'select-emr', 'select-keywords'])
const expandTitle = ref('')
const onShowHistory = (type) => {
  expandTitle.value = type
  historyExpand.value = true
}
const onCopySuccess = () => {
  emit('copy')
}
const onSelectEmr = () => {
  historyExpand.value = false
  // emit('select-emr')
}
const onSelectEmrKeywords = () => {
  historyExpand.value = false
  emit('select-keywords')
}
</script>

<style lang="less" scoped>
.img-style {
  img {
    width: 30px;
    height: 30px;
  }
}
:deep(.ant-drawer-content-wrapper) {
  box-shadow: none !important;
}
</style>
